<template>
<div id="resourceManagement">
  <div id="tabelTitle">
    资源分配
  </div>
  <div id="table">
    <avue-crud
      ref="crud"
      v-model="form"
      :search.sync="searchForm"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @row-update="handleUpdate"
      @row-save="handleSave"
      @row-del="rowDel"
      @selection-change="selectionChange"
    >
      <template slot-scope="{disabled,size}" slot="stuNameSearch">
        <div class="inputStyle">
          <el-input placeholder="请输入姓名或手机号" :disabled="disabled" :size="size" style="width:50%; "
                    v-model="searchForm.keyWord"></el-input>
        </div>

      </template>
      <template slot="menuLeft" slot-scope="{size}">
        <el-button type="primary" :size="size" @click="distribution" >分配</el-button>
      </template>
    </avue-crud>

  </div>

  <div>
    <el-dialog
      title="分配资源"
      :visible.sync="dialogVisible"
      width="20%"
      >
     <div>
       <avue-form ref="formForm" v-model="formForm" :option="formOption" @reset-change="emptytChange" @submit="submit">
       </avue-form>
     </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
import tableMixins from "@/mixins/tableMixin.vue"

export default {
  name: "resourceAllocation",
  mixins: [tableMixins],
  data(){
    return {
      dialogVisible:false,
      form: {},
      dialogVisibleForm:{
        region: '',
      },
      data: [],
      //访问接口前缀
      url: "yuanjiu.testnew/tn-alloc-record",
      searchForm: {
      },
      // 表格参数
      tableOption: {
        labelWidth:200,
        searchSpan:6,
        border: true,
        index: false,
        indexLabel: '序号',
        indexWidth: 50,
        stripe: true,
        align: 'center',
        searchMenuSpan:10,
        // searchLabelWidth: 100,
        calcHeight: 300,
        dialogWidth: 900,
        menuWidth: 200,
        menu: true,
        menuAlign: 'center',
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        addBtn: true,
        selection: true,
        rowKey: "id",
        emptyBtn: true,
        editBtn: true,
        delBtn: false,
        emptyBtnText: "重置",
        editBtnText: "修改",
        maxHeight: 645000,
        searchSize: "medium",
        column: [
          {
            prop: 'stuName',
            label: '姓名',
            searchslot: true,
            searchLabelWidth:'50',
            search: true
          },
          {
            prop: 'area',
            label: '城市',
          },

          {
            prop: 'sexCd',
            label: '性别',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicData: [{
              name: '男',
              code: 1
            }, {
              name: '女',
              code: 2
            }],
          }
          ,
          {
            prop: 'phoneNum',
            label: '联系方式',
          },
          {
            prop: 'education',
            label: '学历',
          },
          {
            prop: 'major',
            label: '专业',
          },
          {
            prop: 'productId',
            label: '培训类别',
            type: "select",
            dicUrl: '/yuanjiu.testnew/tn-product/listTnProduct',
            dicMethod: 'post',
            props: {
              label: "productName",
              value: "productId",
              res: "result"
            },
            search:true,
            searchLabelWidth:'80',

            rules: [{
              required: true,
              message: "请选择培训类别",
              trigger: "change"
            }]

          },
          {
            prop: 'chanelDescq',
            label: '渠道',
          },
          {
            prop: 'sourceCode',
            label: '来源途径',
            type: "select",
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=SOURCE_CODE',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
          },
          {
            prop: 'allocStatus',
            search:true,
            searchLabelWidth:'80',
            label: '分配状态',
            type: "select",
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=ALLOC_STS',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
          },
          {
            prop: 'createTime',
            label: '资料录入时间',
            searchLabelWidth:'110',
            type: 'datetime',
            dateDefault: true,
            searchValue: ['', ''],
            searchSpan:10,
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            searchRange: true,
            search: true,
            searchClearable: false
          }
        ]
      },
      addUrl:"insertOrUpdate",
      listUrl: 'pageTnResouceAlloc',
      delIdList:[],
      formForm: {},
      formOption:{
        column: [
          {
            label: "类型",
            prop: "deptId",
            type: "select",
            span: 24,
            dicUrl: '/yuanjiu.testnew/tn-dept/listTnDept',
            dicMethod: 'post',
            props: {
              label: 'deptName',
              value: 'deptId',
              res: 'result'
            },
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "change"
            }],
            filterable: true
          },
          {
            label: "咨询师",
            prop: "adminId",
            type: "select",
            span: 24,
            dicUrl: '/yuanjiu.testnew/yj-admin/getALLCounselor',
            dicMethod: 'get',
            props: {
              label: 'adminRealName',
              value: 'adminId',
              res: 'result'
            },
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "change"
            }],
            filterable: true
          },
        ]
      },
    }
  },
  methods:{
    //勾选获取当前数据ID
    selectionChange(list){
      // console.log(list)
      this.delIdList =[]
      list.forEach((x)=>{
        this.delIdList.push(x.stuId)
      })
    },
    uploadExcel(){
      // console.log('daoru')
    },
    distribution(){
      if(this.delIdList.length==0){
        this.$message.error('请先选择数据');
      }
      else {
        this.dialogVisible =true
      }
    },
    emptytChange(){
    },
    //分配资源
    submit(){
      this.$httpService.post('/yuanjiu.testnew/tn-alloc-record/insertOrUpdate', {
        adminId:this.formForm.adminId,
        deptId:this.formForm.deptId,
        stuIds:this.delIdList
      }).then(res => {
        this.$message.success('操作成功');
        this.$refs.crud.toggleSelection();
        this.dialogVisible = false
        this.getList()

      })
    }


  },
  mounted() {
  }
}
</script>

<style scoped>
.inputStyle{
  width: 600px;
}
@media only screen and (max-width: 1600px){
  .inputStyle{
    width: 530px;
  }
}
@media only screen and (max-width: 1500px){
  .inputStyle{
    width: 430px;
  }
}
@media only screen and (max-width: 1366px){
  .inputStyle{
    width: 330px;
  }
}
@media only screen and (max-width: 900px){
  .inputStyle{
    width: 600px;
  }
}

</style>
